<template>
  <div id="industry" class="industry">
    <select v-model="industryOne" :disabled="downShow">
      <option value="">一级行业</option>
      <option :value="item.industryOne" v-for="item in industryData">{{item.industryOne}}</option>
    </select>
    <select v-model="industryTwo" :disabled="downShow">
      <option value="">二级行业</option>
      <option :value="item.name" v-for="item in states">{{item.name}}</option>
    </select>
  </div>
</template>
<script type="text/javascript">
import industryData from './industryData'
export default {
  props: {
    downShow: Boolean
  },
  data() {
    return {
      industryData: industryData,
      industryOne: '',
      industryTwo: ''
    }
  },
  computed: {
    states() {
      if (!this.industryOne) {
        return []
      } else {
        var arr = []
        industryData.forEach((item, index) => {
          if (this.industryOne === item.industryOne) {
            arr = item.industryTwo
          }
        })
        return arr
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.industry {
  display: inline-block;
}

select {
  width: 240px;
  height: 40px;
  border: 1px solid #ddd;
}

</style>
